
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-pixie"></i>
                    <div class="name">皮鞋</div>
                    <div class="fontclass">.icon-pixie</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwuchekong"></i>
                    <div class="name">购物车空</div>
                    <div class="fontclass">.icon-gouwuchekong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bangzhu"></i>
                    <div class="name">帮助</div>
                    <div class="fontclass">.icon-bangzhu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwuche"></i>
                    <div class="name">购物车</div>
                    <div class="fontclass">.icon-gouwuche</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantouxia"></i>
                    <div class="name">箭头下</div>
                    <div class="fontclass">.icon-jiantouxia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhua"></i>
                    <div class="name">电话</div>
                    <div class="fontclass">.icon-dianhua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fangdajing2"></i>
                    <div class="name">放大镜</div>
                    <div class="fontclass">.icon-fangdajing2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tui"></i>
                    <div class="name">退</div>
                    <div class="fontclass">.icon-tui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon22"></i>
                    <div class="name">上箭头</div>
                    <div class="fontclass">.icon-icon22</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixin"></i>
                    <div class="name">微信</div>
                    <div class="fontclass">.icon-weixin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-unie61d"></i>
                    <div class="name">微博</div>
                    <div class="fontclass">.icon-unie61d</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouji1"></i>
                    <div class="name">手机</div>
                    <div class="fontclass">.icon-shouji1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wujiaoxing"></i>
                    <div class="name">五角星</div>
                    <div class="fontclass">.icon-wujiaoxing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-gouwuche01"></i>
                    <div class="name">购物车-01</div>
                    <div class="fontclass">.icon-gouwuche01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fangdajing"></i>
                    <div class="name">放大镜</div>
                    <div class="fontclass">.icon-fangdajing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouji2"></i>
                    <div class="name">手机</div>
                    <div class="fontclass">.icon-shouji2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-01"></i>
                    <div class="name">导航</div>
                    <div class="fontclass">.icon-01</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qianbao1"></i>
                    <div class="name">钱包</div>
                    <div class="fontclass">.icon-qianbao1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiud"></i>
                    <div class="name">酒店</div>
                    <div class="fontclass">.icon-jiud</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tejia"></i>
                    <div class="name">特价</div>
                    <div class="fontclass">.icon-tejia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconnav2"></i>
                    <div class="name">导航</div>
                    <div class="fontclass">.icon-iconnav2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangji"></i>
                    <div class="name">相机</div>
                    <div class="fontclass">.icon-xiangji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jinlingyingcaiwangtubiao73"></i>
                    <div class="name">地球</div>
                    <div class="fontclass">.icon-jinlingyingcaiwangtubiao73</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-youhui"></i>
                    <div class="name">优惠</div>
                    <div class="fontclass">.icon-youhui</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liren"></i>
                    <div class="name">丽人</div>
                    <div class="fontclass">.icon-liren</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangyoujiankuohao"></i>
                    <div class="name">向右尖括号</div>
                    <div class="fontclass">.icon-xiangyoujiankuohao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiangzuojiankuohao"></i>
                    <div class="name">向左尖括号</div>
                    <div class="fontclass">.icon-xiangzuojiankuohao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kongyun"></i>
                    <div class="name">空运</div>
                    <div class="fontclass">.icon-kongyun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tuihuo"></i>
                    <div class="name">退货</div>
                    <div class="fontclass">.icon-tuihuo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tubiao102"></i>
                    <div class="name">回到顶部</div>
                    <div class="fontclass">.icon-tubiao102</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xingxing"></i>
                    <div class="name">星星</div>
                    <div class="fontclass">.icon-xingxing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontren"></i>
                    <div class="name">人</div>
                    <div class="fontclass">.icon-iconfontren</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wujiaoxingman"></i>
                    <div class="name">五角星（满）</div>
                    <div class="fontclass">.icon-wujiaoxingman</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wujiaoxingkong"></i>
                    <div class="name">五角星（空）</div>
                    <div class="fontclass">.icon-wujiaoxingkong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daosanjiao"></i>
                    <div class="name">倒三角</div>
                    <div class="fontclass">.icon-daosanjiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconpingtaieleyao"></i>
                    <div class="name">icon平台饿了么</div>
                    <div class="fontclass">.icon-iconpingtaieleyao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tui1"></i>
                    <div class="name">退货保障</div>
                    <div class="fontclass">.icon-tui1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-iconfontmuyulu"></i>
                    <div class="name">洗发水</div>
                    <div class="fontclass">.icon-iconfontmuyulu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fujin"></i>
                    <div class="name">附近</div>
                    <div class="fontclass">.icon-fujin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-lingdang"></i>
                    <div class="name">铃铛</div>
                    <div class="fontclass">.icon-lingdang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingdan2"></i>
                    <div class="name">订单</div>
                    <div class="fontclass">.icon-dingdan2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-guanbi1"></i>
                    <div class="name">关闭1</div>
                    <div class="fontclass">.icon-guanbi1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-bao"></i>
                    <div class="name">包</div>
                    <div class="fontclass">.icon-bao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wode"></i>
                    <div class="name">我的</div>
                    <div class="fontclass">.icon-wode</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-triangle-copy"></i>
                    <div class="name">三角形</div>
                    <div class="fontclass">.icon-triangle-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pingguo"></i>
                    <div class="name">苹果</div>
                    <div class="fontclass">.icon-pingguo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fangdajing1"></i>
                    <div class="name">放大镜</div>
                    <div class="fontclass">.icon-fangdajing1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huiyuanqia"></i>
                    <div class="name">会员卡</div>
                    <div class="fontclass">.icon-huiyuanqia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiubeikuai"></i>
                    <div class="name">酒杯_块</div>
                    <div class="fontclass">.icon-jiubeikuai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huidaodingbu"></i>
                    <div class="name">回到顶部</div>
                    <div class="fontclass">.icon-huidaodingbu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duigou63"></i>
                    <div class="name">对钩</div>
                    <div class="fontclass">.icon-duigou63</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-kouhong"></i>
                    <div class="name">口红</div>
                    <div class="fontclass">.icon-kouhong</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-faxian1"></i>
                    <div class="name">发现</div>
                    <div class="fontclass">.icon-faxian1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiantou"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-jiantou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hua"></i>
                    <div class="name">花</div>
                    <div class="fontclass">.icon-hua</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrow2-right"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-arrow2-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhengpin"></i>
                    <div class="name">正品</div>
                    <div class="fontclass">.icon-zhengpin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-unie644"></i>
                    <div class="name">三点</div>
                    <div class="fontclass">.icon-unie644</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-muyingqinzi"></i>
                    <div class="name">母婴亲子</div>
                    <div class="fontclass">.icon-muyingqinzi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xuexipeixun"></i>
                    <div class="name">学习培训</div>
                    <div class="fontclass">.icon-xuexipeixun</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-meishi"></i>
                    <div class="name">美食</div>
                    <div class="fontclass">.icon-meishi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zhoubianyou"></i>
                    <div class="name">周边游</div>
                    <div class="fontclass">.icon-zhoubianyou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ktv"></i>
                    <div class="name">ktv</div>
                    <div class="fontclass">.icon-ktv</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jinrixindan"></i>
                    <div class="name">今日新单</div>
                    <div class="fontclass">.icon-jinrixindan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouji"></i>
                    <div class="name">shouji</div>
                    <div class="fontclass">.icon-shouji</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jifenshangcheng"></i>
                    <div class="name">积分商城</div>
                    <div class="fontclass">.icon-jifenshangcheng</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiaochikuaican"></i>
                    <div class="name">小吃快餐</div>
                    <div class="fontclass">.icon-xiaochikuaican</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jifen1"></i>
                    <div class="name">积分</div>
                    <div class="fontclass">.icon-jifen1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-yuanquanjiantouxiangshang"></i>
                    <div class="name">ecjia-圆圈箭头-向上</div>
                    <div class="fontclass">.icon-yuanquanjiantouxiangshang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-waimai"></i>
                    <div class="name">外卖</div>
                    <div class="fontclass">.icon-waimai</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-ring"></i>
                    <div class="name">戒指</div>
                    <div class="fontclass">.icon-ring</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zuliao"></i>
                    <div class="name">足疗</div>
                    <div class="fontclass">.icon-zuliao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sandaogang"></i>
                    <div class="name">三道杠</div>
                    <div class="fontclass">.icon-sandaogang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-fuwuzhongxinb"></i>
                    <div class="name">服务中心b</div>
                    <div class="fontclass">.icon-fuwuzhongxinb</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dawan"></i>
                    <div class="name">碗</div>
                    <div class="fontclass">.icon-dawan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wujiaoxing2"></i>
                    <div class="name">五角星 2</div>
                    <div class="fontclass">.icon-wujiaoxing2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daohang"></i>
                    <div class="name">导航</div>
                    <div class="fontclass">.icon-daohang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daohang1"></i>
                    <div class="name">导航</div>
                    <div class="fontclass">.icon-daohang1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-muying"></i>
                    <div class="name">母婴</div>
                    <div class="fontclass">.icon-muying</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-zan"></i>
                    <div class="name">赞</div>
                    <div class="fontclass">.icon-zan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daohang2"></i>
                    <div class="name">导航</div>
                    <div class="fontclass">.icon-daohang2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shenghuofuwu"></i>
                    <div class="name">生活服务</div>
                    <div class="fontclass">.icon-shenghuofuwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shoucang"></i>
                    <div class="name">我的收藏</div>
                    <div class="fontclass">.icon-shoucang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huangguan"></i>
                    <div class="name">皇冠</div>
                    <div class="fontclass">.icon-huangguan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-you"></i>
                    <div class="name">邮</div>
                    <div class="fontclass">.icon-you</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huochepiao"></i>
                    <div class="name">火车票</div>
                    <div class="fontclass">.icon-huochepiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-liwu"></i>
                    <div class="name">礼物</div>
                    <div class="fontclass">.icon-liwu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-test"></i>
                    <div class="name">甜筒</div>
                    <div class="fontclass">.icon-icon-test</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qianbao"></i>
                    <div class="name">钱包</div>
                    <div class="fontclass">.icon-qianbao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jiazhuang"></i>
                    <div class="name">家装</div>
                    <div class="fontclass">.icon-jiazhuang</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-praise"></i>
                    <div class="name">推荐</div>
                    <div class="fontclass">.icon-praise</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wujiaoxing-shi"></i>
                    <div class="name">五角星-实</div>
                    <div class="fontclass">.icon-wujiaoxing-shi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jifen"></i>
                    <div class="name">积分</div>
                    <div class="fontclass">.icon-jifen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianzan"></i>
                    <div class="name">点赞</div>
                    <div class="fontclass">.icon-dianzan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-aixin"></i>
                    <div class="name">爱心</div>
                    <div class="fontclass">.icon-aixin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pingfenwujiaoxing"></i>
                    <div class="name">评分五角星</div>
                    <div class="fontclass">.icon-pingfenwujiaoxing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-aixin1"></i>
                    <div class="name">爱心</div>
                    <div class="fontclass">.icon-aixin1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pingfenwujiaoxing1"></i>
                    <div class="name">评分五角星</div>
                    <div class="fontclass">.icon-pingfenwujiaoxing1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pingfenwujiaoxing11"></i>
                    <div class="name">评分五角星</div>
                    <div class="fontclass">.icon-pingfenwujiaoxing11</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wujiaoxing1"></i>
                    <div class="name">五角星</div>
                    <div class="fontclass">.icon-wujiaoxing1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-faxian"></i>
                    <div class="name">发现</div>
                    <div class="fontclass">.icon-faxian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hongqi"></i>
                    <div class="name">红旗</div>
                    <div class="fontclass">.icon-hongqi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-icon-test1"></i>
                    <div class="name">闹钟</div>
                    <div class="fontclass">.icon-icon-test1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duigou"></i>
                    <div class="name">对钩</div>
                    <div class="fontclass">.icon-duigou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huanyipi"></i>
                    <div class="name">换一批</div>
                    <div class="fontclass">.icon-huanyipi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xiasanjiao"></i>
                    <div class="name">下三角</div>
                    <div class="fontclass">.icon-xiasanjiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingwei1"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-dingwei1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-CgpQVFeNsKAdEAAACNRbAmVc"></i>
                    <div class="name">外卖</div>
                    <div class="fontclass">.icon-CgpQVFeNsKAdEAAACNRbAmVc</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-start-half"></i>
                    <div class="name">星</div>
                    <div class="fontclass">.icon-start-half</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingdan"></i>
                    <div class="name"> 订单</div>
                    <div class="fontclass">.icon-dingdan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xindiantu"></i>
                    <div class="name">心电图</div>
                    <div class="fontclass">.icon-xindiantu</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shezhi"></i>
                    <div class="name">设置</div>
                    <div class="fontclass">.icon-shezhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wode1"></i>
                    <div class="name">我 的</div>
                    <div class="fontclass">.icon-wode1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-Artboard"></i>
                    <div class="name">猫眼new</div>
                    <div class="fontclass">.icon-Artboard</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dingdan1"></i>
                    <div class="name">订单</div>
                    <div class="fontclass">.icon-dingdan1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shangsanjiao"></i>
                    <div class="name">上三角</div>
                    <div class="fontclass">.icon-shangsanjiao</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-duigou1"></i>
                    <div class="name">对勾</div>
                    <div class="fontclass">.icon-duigou1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-wode2"></i>
                    <div class="name">我的</div>
                    <div class="fontclass">.icon-wode2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shouhuodizhi"></i>
                    <div class="name">收货地址</div>
                    <div class="fontclass">.icon-shouhuodizhi</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-faxian2"></i>
                    <div class="name">发现</div>
                    <div class="fontclass">.icon-faxian2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-element"></i>
                    <div class="name">element</div>
                    <div class="fontclass">.icon-element</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-tejiazhuanqu-"></i>
                    <div class="name">特价专区-01</div>
                    <div class="fontclass">.icon-tejiazhuanqu-</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jifenshangcheng1"></i>
                    <div class="name">积分商城</div>
                    <div class="fontclass">.icon-jifenshangcheng1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-huidaodingbu1"></i>
                    <div class="name">回到顶部</div>
                    <div class="fontclass">.icon-huidaodingbu1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xing"></i>
                    <div class="name">星</div>
                    <div class="fontclass">.icon-xing</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daohang3"></i>
                    <div class="name">导航</div>
                    <div class="fontclass">.icon-daohang3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dianhua1"></i>
                    <div class="name">电话 (1)</div>
                    <div class="fontclass">.icon-dianhua1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daohang4"></i>
                    <div class="name">导航</div>
                    <div class="fontclass">.icon-daohang4</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-eliaomo"></i>
                    <div class="name">饿了么</div>
                    <div class="fontclass">.icon-eliaomo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-daohang11"></i>
                    <div class="name">导航</div>
                    <div class="fontclass">.icon-daohang11</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-xianshi"></i>
                    <div class="name">限时</div>
                    <div class="fontclass">.icon-xianshi</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
